<!--
 * @Description: 生成海报组件
 * 保存海报按钮和关闭按钮 在html代码中写出来 绑定点击方法然后透明 再用canvas 覆盖
-->
<template>
	<view class="poster-packbox" v-show="isShowPoster" style="width:750rpx; height:1234rpx; top: 100rpx;" @touchmove.stop.prevent @click="setCancelPosterFun">

		<view class="page-mask" @click="setCancelPosterFun" @touchmove.stop.prevent></view>
		
		<image class="absolute" style="width: 70rpx;height: 70rpx;right: 50rpx;top: 140rpx;z-index: 100;" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close.png`" mode="" @click="setCancelPosterFun"></image>

		<view @touchmove.stop.prevent class="oper-btn-content" style="z-index: 1000;" :style="{top: 522 * posterSystemInfo.scaleY + 'px'}">
			<cover-view class="confirm-btn-box relative font-hanserif-bold">
				<cover-image class="bg" @click.stop="setSavePosterFun"
					v-if="commonConfigs && commonConfigs.domainFrontFileLink"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-popuu-save-btn.png`"
					mode=""></cover-image>
			</cover-view>
			<cover-view class="confirm-btn-box relative font-hanserif-bold">
				<cover-image class="bg" @click.stop="setSharePosterFun" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-popuu-share-btn.png`"
					mode="">
				</cover-image>
			</cover-view>
		</view>

		<canvas canvas-id="canvasPoster" id="canvasPoster" :style="'width:100%; height:100%;z-index: 10;'" :width="posterSystemInfo.w" :height="posterSystemInfo.h"></canvas>

	</view>
</template>

<script>
	import {
		getPosterSystemFun,
		getPosterDrawFun,
	} from './utils'

	export default {
		name: 'comPosterCanvas',
		data() {
			return {
				isShowPoster: false,
				posterSystemInfo: {},
			}
		},
		props: {
			posterData: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
			/**
			 * @description: 计算海报背景数据
			 * @param {*}
			 * @return {*}
			 */
			posterBasicInfo() {
				let data = this.posterData
				let posterSystemInfo = this.posterSystemInfo
				let posterBg = {
					url: data.posterBasicInfo.url,
					r: data.posterBasicInfo.r * posterSystemInfo.scale,
					w: data.posterBasicInfo.w * posterSystemInfo.scale,
					h: data.posterBasicInfo.h * posterSystemInfo.scale,
					x: (posterSystemInfo.w - data.posterBasicInfo.w * posterSystemInfo.scale) / 2,
					y: (posterSystemInfo.h - data.posterBasicInfo.h * posterSystemInfo.scale) / 2 - 70,
					p: data.posterBasicInfo.p * posterSystemInfo.scale
				}
				return posterBg
			},
			/**
			 * @description: 计算海报头部主图
			 * @param {*}
			 * @return {*}
			 */
			posterBgInfo() {
				let data = this.posterData || {}
				let posterSystemInfo = this.posterSystemInfo || {}
				return {
					url: data.posterBgInfo.url,
					r: data.posterBgInfo.r * posterSystemInfo.scale,
					w: data.posterBgInfo.w * posterSystemInfo.scale,
					h: data.posterBgInfo.h * posterSystemInfo.scale,
					x: (posterSystemInfo.w - data.posterBgInfo.w * posterSystemInfo.scale) / 2,
					y: this.posterBasicInfo.y + data.posterBasicInfo.p * posterSystemInfo.scale + data.posterBgInfo.y * posterSystemInfo.scale
				}
			},
			/**
			 * @description: 计算小程序码
			 * @param {*}
			 * @return {*}
			 */
			qrcodeBgInfo() {
				return {
					url: this.posterData.qrcodeBgInfo.url,
					code: this.posterData.qrcodeBgInfo.code,
					r: this.posterData.qrcodeBgInfo.r * this.posterSystemInfo.scale,
					w: this.posterData.qrcodeBgInfo.w * this.posterSystemInfo.scale,
					h: this.posterData.qrcodeBgInfo.h * this.posterSystemInfo.scale,
					x: (this.posterSystemInfo.w - this.posterData.qrcodeBgInfo.w * this.posterSystemInfo.scale) / 2,
					y: 0 + this.posterData.qrcodeBgInfo.y * this.posterSystemInfo.scaleY - 70 //y需要加上绘图后文本的y
				}
			}
		},
		created() {
			// 获取设备信息
			this.posterSystemInfo = getPosterSystemFun()
		},
		methods: {
			setSharePosterFun() {
				uni.showLoading({
					title: '正在分享中...',
					mask: true,
				})
				let _this = this;
		
				// 把画布转化成临时文件
				uni.canvasToTempFilePath({
					x: this.posterBasicInfo.x,
					y: this.posterBasicInfo.y,
					width: this.posterBasicInfo.w, // 画布的宽
					height: this.posterBasicInfo.h, // 画布的高
					destWidth: this.posterBasicInfo.w * 5,
					destHeight: this.posterBasicInfo.h * 5,
					canvasId: 'canvasPoster',
					success(res) {
						// #ifdef MP-WEIXIN
						uni.showShareImageMenu({
							path: res.tempFilePath
						})
						// #endif
	
						// #ifndef MP-WEIXIN
						_this.$store.commit('SHARE_INFO_SET_FUN', {
							title: `${_this.userInfo.nickname}正在邀请您,快来加入吧`,
							path: `/pages/tabbar/tabbar?scene=invite_uid%3D${_this.qrcodeBgInfo.code}`,
							imageUrl: `${_this.commonConfigs.domainFrontFileLink}/files/images/common/new-mp-share.png`,
							content: '',
							desc: ''
						})
						// #endif
	
						uni.hideLoading()
					},
					fail(res) {
						console.log('fail -> res', res)
						uni.showToast({
							title: '保存失败,稍后再试',
							duration: 2000,
							icon: 'none'
						})
						uni.hideLoading()
					}
				},
				this)
			},
			
			/**
			 * @description: 展示海报
			 * @param {type}
			 * @return {type}
			 */
			setShowPosterFun() {
				this.isShowPoster = true
				this.generatePoster()
			},
			
			/**
			 * @description: 生成海报
			 */
			async generatePoster() {
				uni.showLoading({
					title: '正在生成海报中...',
					mask: true,
				})
				const ctx = uni.createCanvasContext('canvasPoster', this)
				this.ctx = ctx
				ctx.clearRect(0, 0, this.posterSystemInfo.w, this.posterSystemInfo.h) //清空之前的海报
				ctx.draw() //清空之前的海报
				// 根据设备屏幕大小和距离屏幕上下左右距离，及圆角绘制背景
				let posterBasicInfo = this.posterBasicInfo
				let posterBgInfo = this.posterBgInfo
				let qrcodeBgInfo = this.qrcodeBgInfo
			
				await getPosterDrawFun(ctx, posterBasicInfo.x, posterBasicInfo.y, posterBasicInfo.w, posterBasicInfo.h, posterBasicInfo.r, posterBasicInfo.url)
				await getPosterDrawFun(ctx, posterBgInfo.x, posterBgInfo.y, posterBgInfo.w, posterBgInfo.h, posterBgInfo.r, posterBgInfo.url)

				await getPosterDrawFun(
					ctx,
					qrcodeBgInfo.x,
					qrcodeBgInfo.y,
					qrcodeBgInfo.w,
					qrcodeBgInfo.h,
					qrcodeBgInfo.r,
					qrcodeBgInfo.url
				)
				uni.hideLoading()
			},
			
			/**
			 * @description: 保存到系统相册
			 * @param {type}
			 * @return {type}
			 */
			setSavePosterFun() {
				uni.showLoading({
					title: '正在保存中...',
					mask: true,
				})
				let _this = this
				// #ifndef MP-ALIPAY
				uni.canvasToTempFilePath({
						x: this.posterBasicInfo.x,
						y: this.posterBasicInfo.y,
						width: this.posterBasicInfo.w, // 画布的宽
						height: this.posterBasicInfo.h, // 画布的高
						destWidth: this.posterBasicInfo.w * 5,
						destHeight: this.posterBasicInfo.h * 5,
						canvasId: 'canvasPoster',
						success(res) {
							//保存图片至相册
							// #ifndef H5
							// 除了h5以外的其他端
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									uni.hideLoading()
									uni.showToast({
										title: '图片保存成功,可以去分享啦',
										duration: 2000,
										icon: 'none'
									})
									_this.setCancelPosterFun()
								},
								fail() {
									uni.showToast({
										title: '保存失败,稍后再试',
										duration: 2000,
										icon: 'none'
									})
									uni.hideLoading()
								}
							})
							// #endif

							// #ifdef H5
							// h5的时候
							uni.showToast({
								title: '请长按保存!',
								duration: 3000,
								icon: 'none'
							})
							_this.setCancelPosterFun()
							_this.$emit('previewImage', res.tempFilePath)
							// #endif
						},
						fail(res) {
							console.log('fail -> res', res)
							uni.showToast({
								title: '保存失败,稍后再试',
								duration: 2000,
								icon: 'none'
							})
							uni.hideLoading()
						}
					},
					this
				)
				// #endif
				// #ifdef MP-ALIPAY
				// 支付宝小程序条件下 toTempFilePath
				this.ctx.toTempFilePath({
						x: this.posterBasicInfo.x,
						y: this.posterBasicInfo.y,
						width: this.posterBasicInfo.w, // 画布的宽
						height: this.posterBasicInfo.h, // 画布的高
						destWidth: this.posterBasicInfo.w * 5,
						destHeight: this.posterBasicInfo.h * 5,
						success(res) {
							//保存图片至相册
							my.saveImage({
								url: res.apFilePath,
								showActionSheet: true,
								success(res) {
									uni.hideLoading()
									uni.showToast({
										title: '图片保存成功,可以去分享啦',
										duration: 2000,
										icon: 'none'
									})
									_this.setCancelPosterFun()
								},
								fail() {
									uni.showToast({
										title: '保存失败,稍后再试',
										duration: 2000,
										icon: 'none'
									})
									uni.hideLoading()
								}
							})
						},
						fail(res) {
							console.log('fail -> res', res)
							uni.showToast({
								title: '保存失败,稍后再试',
								duration: 2000,
								icon: 'none'
							})
							uni.hideLoading()
						}
					},
					this
				)
				// #endif
			},
			
			/**
			 * @description: 取消海报
			 * @param {type}
			 * @return {type}
			 */
			setCancelPosterFun() {
				this.isShowPoster = false
				this.$emit('cancel', true)
			},
		}
	}
</script>

<style lang="scss">
	.poster-packbox {
		position: absolute;
		top: 0;

		.page-mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}

		.oper-btn-content {
			position: absolute;
			display: flex;
			width: 80%;
			height: 100rpx;
			left: 0;
			right: 0;
			top: 1080rpx;
			margin: auto;
			z-index: 16;
			justify-content: space-around;
		}

		.oper-btn-content .bg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}

		.confirm-btn-box {
			z-index: 16;
			width: 216rpx;
			height: 68rpx;
			line-height: 68rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>